<template>
  <xn-form-container :title="formData.id ? '编辑房间' : '增加房间'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-form-item label="房间名称：" name="roomName">
        <a-input v-model:value="formData.roomName" placeholder="请输入房间名称" allow-clear />
      </a-form-item>
      <a-form-item label="床位数量：" name="bedNum">
        <a-input v-model:value="formData.bedNum" type="number" placeholder="请输入床位数量" allow-clear />
      </a-form-item>
      <a-form-item label="房间类型" name="roomType">
        <a-select v-model:value="formData.roomType" placeholder="请输入房间牌类型">
					<a-select-option v-for="item in props.cateDataSource" :value="item.roomType">{{ item.typeName }}</a-select-option>
				</a-select>
      </a-form-item>
      <a-form-item label="是否存在卫生间">
        <a-radio-group v-model:value="formData.toilet">
          <a-radio value="01">存在卫生间</a-radio>
          <a-radio value="02">不存在卫生间：</a-radio>
        </a-radio-group>
      </a-form-item>
      <!-- <a-form-item label="房间状态  00 空闲  01 等待技师 02 访问中 03 客人休息 04 脏房 05 有预约 06 维修：" name="state">
        <a-input v-model:value="formData.state" placeholder="请输入房间状态  00 空闲  01 等待技师 02 访问中 03 客人休息 04 脏房 05 有预约 06 维修"
          allow-clear />
      </a-form-item> -->
      <a-form-item label="备注：" name="remark">
        <a-textarea  v-model:value="formData.remark" placeholder="请输入备注" allow-clear show-count :maxlength="30"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizRoomForm">
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import bizRoomApi from '@/api/biz/bizRoomApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const props = defineProps({
  cateDataSource:{
    type:Array
  }
})
// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 默认要校验的
const formRules = {
  roomName: [{ required: true, message: '必填项不能为空' }],
  bedNum: [{ required: true, message: '必填项不能为空' }],
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizRoomApi
      .bizRoomSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>
